<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{width:100px;height:100px;position: absolute;left:0;top:0;background: red;
            transition: all 1s;
        }
        .box2{width:100px;height:100px;position: absolute;left:0;top:110px;background: green;
            transition: all 1s linear;
        }
        html:hover .box1{left:400px;}
        html:hover .box2{left:400px;}
        /*  */
        .box{width:100px;height:100px;position: absolute;left:0px;top:0;background: red;}
        .xbox{width:100px;height:100px;position: absolute;left:0px;top:110px;background: green;}
        .line{width:1px;height:400px;position: absolute;left:400px;top:0px;background: black;}
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="xbox">文字</div>
    <div class="line"></div>
</body>
<script>

    const box = document.querySelector(".box");
    const xbox = document.querySelector(".xbox");

    box.onmouseover = function(){
        move(box, {width: 400, height:104}, function(){
            box.innerHTML = "结束了"
            move(xbox, {width: 400, height:104, fontSize:100});
        });
    }
    // xbox.onmouseover = function(){
    //     move(xbox, {width: 400, height:104});
    // }


    function move(ele, obj, cb){
        clearInterval( ele.t );
        ele.t = setInterval(()=>{
            let flag = true;
            for(let i in obj){
                let now = parseInt(getStyle(ele, i));
                let speed = (obj[i] - now)/10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                ele.style[i] = now + speed + "px";
                if(now !== obj[i]){
                    flag = false;
                }
            }
            if(flag){
                clearInterval(ele.t);
                cb && cb();
            }
        },30)
    }

    function getStyle(ele, attr){
        return window.getComputedStyle ? getComputedStyle(ele)[attr] : ele.currentStyle[attr];
    }
    
</script>
</html>